<template>
    <div id="chartLine"></div>
</template>

<script setup>
import { ref, onMounted, nextTick, markRaw } from "vue"
import * as echarts from 'echarts'

// 接受父组件的数据
const props = defineProps({
    legend: {
        type: Array,
        default: []
    },
    xAxisData: {
        type: Array,
        default: []
    },
    seriesData1: {
        type: Array,
        default: []
    },
    seriesData2: {
        type: Array,
        default: []
    },
})

// 图表对象
const chartLine = ref(null)


const createLineChart = (chart) => {
    const option = {
        // backgroundColor: "#064965",
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '2%',
            bottom: '5%',
            containLabel: true
        },
        legend: {
            // icon: 'rect',
            right: "center",
            top: '2%',
            itemWidth: 10, // 设置宽度
            itemHeight: 10, // 设置高度
            itemGap: 15, // 设置间距
            textStyle: { //图例文字的样式
                color: '#89BFE5',
                fontSize: 12
            }
        },
        xAxis: {
            boundaryGap: true,
            data: props.xAxisData,
            axisLine: {
                lineStyle: {
                    color: "rgba(117, 168, 202, 0.4)"
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff'
            }
        },
        yAxis: [{
            name: '单位：万吨/千公顷',
            type: "value",
            inverse: false,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(117, 168, 202, 0.3)',
                    type: 'dashed'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#0A5C95"
                }
            },
            axisLabel: {
                formatter: "{value}",
                color: '#89BFE5',
                fontSize: 12
            },
            nameTextStyle: {
                color: '#89BFE5',
                padding: [0, 0, 0, 15],
                fontSize: 12
            },
            axisTick: {
                show: false
            }
        }],
        series: [
            {
                name: props.legend[0],
                type: "line",
                symbol: 'circle', //设定为实心点
                showAllSymbol: true,
                symbolSize: 0,
                smooth: true,
                itemStyle: {
                    color: `#00CBFE`,
                    lineStyle: { //线的颜色
                        color: `#00CBFE`,
                        width: 1.5
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //变化度
                        //三种由深及浅的颜色
                        [{
                            offset: 0,
                            color: 'rgba(1, 180, 255, 0.2)'
                        }, {
                            offset: 1,
                            color: 'rgba(1, 180, 255, 0.1)'
                        }])
                },
                data: props.seriesData1
            },
            {
                name: props.legend[1],
                type: "line",
                symbol: 'circle', //设定为实心点
                showAllSymbol: true,
                symbolSize: 0,
                smooth: true,
                itemStyle: {
                    color: `#FFDF04`,
                    lineStyle: { //线的颜色
                        color: `#FFDF04`,
                        width: 1.5
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //变化度
                        //三种由深及浅的颜色
                        [{
                            offset: 0,
                            color: 'rgba(255, 223, 4, 0.2)'
                        }, {
                            offset: 1,
                            color: 'rgba(255, 223, 4, 0.1)'
                        }])
                },
                data: props.seriesData2
            }
        ]
    };
    chart.setOption(option);
}

const resize = () => {
    chartLine.value.resize();
}

onMounted(() => {
    chartLine.value = markRaw(echarts.init(document.getElementById('chartLine')))
    createLineChart(chartLine.value)

    window.addEventListener("resize", resize);

})


</script>

<style lang="scss" scoped>
#chartLine {
    width: 100%;
    height: 100%;
}
</style>